<template>
  <el-row>
    <el-image
      v-for="img in imgList"
      :key="img.url"
      :src="img.url"
      :preview="preview"
      :preview-src-list="previewList"
      :style="`width:${realWidth};height:${realHeight};`"
    >
    </el-image>
  </el-row>
</template>

<script>
import { isJSON } from "@/utils/index";
export default {
  props: {
    value: {
      require: true,
    },
    width: {
      type: [Number, String],
      default: "",
    },
    height: {
      type: [Number, String],
      default: "",
    },
    preview: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    imgList() {
      if (isJSON(this.value)) {
        let list = JSON.parse(this.value);
        return list.map((item) => {
          item.url = minioPath + item.url;
          return item;
        });
      } else {
        return [];
      }
    },
    previewList() {
      if(this.preview){
        return this.imgList.map((item) => item.url);
      }
    },
    realWidth() {
      return typeof this.width == "string" ? this.width : `${this.width}px`;
    },
    realHeight() {
      return typeof this.height == "string" ? this.height : `${this.height}px`;
    },
  },
};
</script>
